<template>
	<view class="integralDetail">
		<view class="top">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in shopData.images" :key="index" class="swiperitemBox">
					<image class="imgsBox" :src="$wanlshop.oss(item)" mode="aspectFit" @click="btnimg(index)"></image>
				</swiper-item>
			</swiper>

			<view class="c3d fb f28 mt28">
				{{shopData.title}}
			</view>
			<view class="info fb f28 mt14">
				{{shopData.description}}
			</view>
			<view class="flex_sb mt24">
				<view class="f36 fb cFA750C">
					{{shopData.price}}
				</view>
				<view class="">
					{{shopData.stock}}
				</view>
			</view>
		</view>
		<view class="center">
			<view class="dhxz">
				<view class="tac title">
					- 兑换须知 -
				</view>
				<view class="mt12 f24">
					<view class="">
						1、积分商城所有商品均以实物为准，图片仅供参考。
					</view>
					<view class="">
						2、商品库存有限，兑完即止。
					</view>
					<view class="">
						3、兑换成功后，积分将自动扣除，恕不退还。
					</view>
					<view class="">
						4、兑换成功后，我们将在7个工作日内为您安排发货。
					</view>
					<view class="">
						5、积分兑换的商品不支持退货、换货、修改地址。请您在兑换前仔细确认收货地址及商品信息，包括但不限于商品名称、规格、型号、颜色等。
					</view>
					<view class="">
						6、如因用户自身原因导致商品遗失，由用户自己承担，积分商城不再另行补发及退积分。如因快递公司导致商品丢件，请联系快递公司协商，积分商城不承担责任。
					</view>
				</view>
			</view>
		</view>
		<view class="btnSub mt20">
			<button v-if="shopData.stock > 0" class="btn"
				@click="$wanlshop.to('/pages/user/integral/integralBuy?id='+shopData.id)">
				立即兑换
			</button>
			<button v-else class="btn btn1"
				>
				暂时售罄
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopData: {},
			}
		},
		onLoad(data) {
			this.getDetail(data.id)
		},
		methods: {
			btnimg(index) {
				let urls = this.shopData.images.map(a => this.$wanlshop.oss(a))
				uni.previewImage({
					current: index,
					urls: urls,
					showmenu: true
				})
			},
			getDetail(id) {
				this.$api.post({
					url: '/wanlshop/score/detail',
					data: {
						id: id
					},
				}).then(res => {
					console.log(res);
					// res.images.fitt(a=>this.$wanlshop.oss(a))
					this.shopData = res
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.top {
		background: #fff;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;

		.cFA750C {
			color: #FA750C;
		}

		.swiper {
			height: 520rpx;


			.imgsBox {
				width: 100%;
				height: 480rpx;
			}
		}
	}

	.center {
		padding: 28rpx;

		.dhxz {
			background: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 34rpx 52rpx;

			.title {
				font-size: 32rpx;
				color: #FA750C;
				font-weight: bold;
			}
		}
	}

	.btnSub {
		padding-bottom: env(safe-area-inset-bottom);
		width: 100vw;
		height: 98rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		z-index: 2;

		.btn::after {
			border: none;
		}

		.btn {
			width: 600rpx;
			height: 62rpx;
			background: #F6710A;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;

			button {
				background: #F6710A;
			}
		}
		.btn1{
			background: #767676;
		}
	}
</style>